<template>
  <div class="change-lang">
    <select v-model="langCode">
      <option v-for="item in langListDate" :value="item.value" :key="item.value">{{item.name}}</option>
    </select>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue'
import { useStore } from 'vuex'
import { langList } from '@/utils/lang'

export default defineComponent({
  setup () {
    const store = useStore()
    const langListDate = ref(langList)
    const langCode = ref(store.state.langCode)
    watchEffect(() => {
      store.dispatch('changeLang', langCode.value)
    })
    return {
      langListDate,
      langCode
    }
  }
})
</script>

<style scoped lang="less">
</style>
